<template>
    <div>
        <head-top></head-top>
        <el-row :gutter="20" style="margin-bottom:10px;">
            <el-col :span="12" offset="12">
                <div class="block">
                    <template>
                        <img :src="imgUrl" style="width: 300px; height: 300px">
                    </template>
                </div>
            </el-col>
            <el-col :span="8">
                <div id="clock">
                    <p class="date"> {{date}} </p>
                    <p class="time"> {{time}} </p>
                    <p class="text">LAUGHING MESSAGE MANAGE</p>
                    <p class="text">天气短信任务发送节点20:00:00</p>
                    <p class="text1">LAUGHING 短信任务管理平台</p>

                </div>
            </el-col>

        </el-row>
        <section class="data_section">
            <el-row :gutter="20" style="margin-bottom: 15px;">
                <el-col :span="4">
                    <div class="data_list all_head"><span class="data_num head">短信发送数据：</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">累计发送数量：<span class="data_num">{{requestSuccessCount}}</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">套餐余量：<span class="data_num">{{loadCount}}</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">今日发送量：<span class="data_num">{{todayRequestSuccessCount}}</span></div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 15px;">
                <el-col :span="4">
                    <div class="data_list all_head"><span class="data_num head">天气用户数据：</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">用户数量：<span class="data_num">{{userCount}}</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">绑定地区数：<span class="data_num">{{cityCount}}</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">管理员： <span class="data_num">{{adminCount}}</span></div>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="turnOn">开启服务</el-button>
                    <el-button type="primary" @click="turnOff">关闭服务</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 15px;">
                <el-col :span="4">
                    <div class="data_list all_head"><span class="data_num head">生日短信数据：</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">本月发送数量：<span class="data_num">2</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">绑定用户数：<span class="data_num">7</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">今日发送数量： <span class="data_num">0</span></div>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="turnOnBirthday">开启服务</el-button>
                    <el-button type="primary" @click="turnOffBirthday">关闭服务</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 15px;">
                <el-col :span="4">
                    <div class="data_list all_head"><span class="data_num head">待办短信数据：</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">本月发送数量：<span class="data_num">12</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">绑定用户数：<span class="data_num">7</span></div>
                </el-col>
                <el-col :span="4">
                    <div class="data_list">今日发送数量： <span class="data_num">1</span></div>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="">开启服务</el-button>
                    <el-button type="primary" @click="">关闭服务</el-button>
                </el-col>
            </el-row>
        </section>
        <!--      <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>-->
    </div>

</template>

<script>
	import headTop from '../components/headTop'
	import tendency from '../components/tendency'
	import dtime from 'time-formater'
	import {userCount, orderCount, getUserCount, getOrderCount, adminDayCount, adminCount} from '@/api/getData'
	import Clock from 'vue-clock2';
	import eleCalendar from 'ele-calendar'

	import 'ele-calendar/dist/vue-calendar.css'
	import imgUrl from "../style/sms.jpg"

	export default {
		data() {
			return {
				imgUrl: imgUrl,
				value: new Date(),
				date: this.$moment(new Date()).format("YYYY-MM-DD"),
				time: this.$moment(new Date()).format("HH:mm:ss"),
				userCount: null,
				cityCount: null,
				adminCount: 1,
				requestSuccessCount: null,
				loadCount: null,
				todayRequestSuccessCount: null,
				sevenDay: [],
				sevenDate: [[], [], []],
			}
		},
		components: {
			headTop,
			tendency,
			Clock,
			eleCalendar
		},
		mounted() {
			this.initData();
			for (let i = 6; i > -1; i--) {
				const date = dtime(new Date().getTime() - 86400000 * i).format('YYYY-MM-DD')
				this.sevenDay.push(date)
			}
			this.getSevenData();
		},
		computed: {},
		methods: {
			async initData() {
				this.$axios({
					url: "http://127.0.0.1:9522/phone/count",
					method: "get",
				}).then(res => {
					this.userCount = res.data;
				})
				this.$axios({
					url: "http://127.0.0.1:9522/phone/city/count",
					method: "get",
				}).then(res => {
					this.cityCount = res.data;
				})
				this.$axios({
					url: "http://127.0.0.1:9522/msg/getSend",
					method: "get",
				}).then(res => {
					this.requestSuccessCount = res.data.SendStatusStatistics.RequestSuccessCount;
					this.loadCount = 200 - res.data.SendStatusStatistics.RequestSuccessCount;
				})
				this.$axios({
					url: "http://127.0.0.1:9522/msg/getSend/today",
					method: "get",
				}).then(res => {
					this.todayRequestSuccessCount = res.data.SendStatusStatistics.RequestSuccessCount;
				})
			},
			async getSevenData() {
				const apiArr = [[], [], []];
				this.sevenDay.forEach(item => {
					apiArr[0].push(userCount(item))
					apiArr[1].push(orderCount(item))
					apiArr[2].push(adminDayCount(item))
				})
				const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]]
				Promise.all(promiseArr).then(res => {
					const resArr = [[], [], []];
					res.forEach((item, index) => {
						if (item.status == 1) {
							resArr[Math.floor(index / 7)].push(item.count)
						}
					})
					this.sevenDate = resArr;
				}).catch(err => {
					console.log(err)
				})
			},
			async turnOn() {
				this.$axios({
					url: "http://localhost:9522/phone/turn/on",
					method: "get",
				}).then(res => {
					this.$notify({
						title: '成功！',
						message: '天气服务已开启！',
						type: 'success',
						duration: 1500
					});
				})
			},
			async turnOff() {
				this.$axios({
					url: "http://localhost:9522/phone/turn/off",
					method: "get",
				}).then(res => {
					this.$notify({
						title: '成功！',
						message: '天气服务已关闭！',
						type: 'success',
						duration: 1500
					});

				})
			},
			async turnOnBirthday() {
				this.$axios({
					url: "http://localhost:9522/phone/birthday/turn/on",
					method: "get",
				}).then(res => {
					this.$notify({
						title: '成功！',
						message: '生日服务已开启！',
						type: 'success',
						duration: 1500
					});
				})
			},
			async turnOffBirthday() {
				this.$axios({
					url: "http://localhost:9522/phone/birthday/turn/off",
					method: "get",
				}).then(res => {
					this.$notify({
						title: '成功！',
						message: '生日服务已关闭！',
						type: 'success',
						duration: 1500
					});

				})
			},

		}
	}
</script>

<style lang="less">
    @import '../style/mixin';

    #clock {
        font-family: 'Share Tech Mono', monospace;
        color: #0aafe6;
        text-align: center;
        position: absolute;
        left: 20%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: #0aafe6;
        text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    }


    #clock .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
    }

    #clock .date {
        letter-spacing: 0.1em;
        font-size: 24px;
    }

    #clock .text {
        letter-spacing: 0.1em;
        font-size: 18px;
        padding: 20px 0 0;
    }
    #clock .text1 {
        letter-spacing: 0.1em;
        font-size: 22px;
        padding: 20px 0 0;
    }

    .is-selected {
        color: #1989FA;
    }

    .data_section {
        padding: 20px;
        margin-bottom: 40px;

        .section_title {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px;
        }

        .data_list {
            text-align: center;
            font-size: 14px;
            color: #666;
            border-radius: 6px;
            background: #E5E9F2;

            .data_num {
                color: #333;
                font-size: 26px;

            }

            .head {
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #fff;
                display: inline-block;
            }
        }

        .today_head {
            background: #FF9800;
        }

        .all_head {
            background: #20A0FF;
        }
    }

    .wan {
        .sc(16px, #333)
    }
</style>
